<template>
  <div class="home">
    <el-container>
      <el-header height="5vw" class="header">
        <span class="title">微人事</span>
        <div class="avatar">
          <el-avatar
            :size="50"
            :src="
              user.userface == null
                ? 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                : user.userface
            "
          ></el-avatar>
          <div class="userMenu">
            <el-dropdown trigger="hover" @command="logout">
              <span class="el-dropdown-link">
                {{ this.user.username }}
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="fa fa-sign-out" command="zx"
                  >注销</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="16vw">
          <el-col :span="24">
            <el-menu default-active="2" class="el-menu-vertical-demo" router>
              <el-submenu
                v-for="item in menu"
                :index="item.id + ''"
                :key="item.id"
              >
                <template slot="title">
                  <i
                    :class="item.iconCls"
                    style="color: #409eff; margin-right: 30px"
                  ></i>
                  <span style="font-size: 16px; font-weight: 600">{{
                    item.name
                  }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    v-for="(item1, index1) in item.secondaryMenus"
                    :key="index1"
                    :index="item1.path + ''"
                    >{{ item1.name }}</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      menu: "",
      user: {},
      isShowUserMenu: false,
    };
  },
  created() {
    this.user = this.$getSessionStorage("user");
    this.getMenu();
  },
  methods: {
    getMenu() {
      this.$axios
        .post("menu/getMenuByHrId", this.$qs.stringify({ id: this.user.id }))
        .then((value) => {
          this.menu = value.data;
        })
        .catch((value) => {
          console.error(value);
        });
    },
    logout(command) {
      switch (command) {
        case "zx":
          this.$axios
            .get("logout")
            .then((value) => {
              if (value.data.success) {
                this.$removeSessionStorage("user");
                this.$router.push("/");
              }
            })
            .catch((value) => {
              console.error(value);
            });
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
.header {
  background-color: #409eff;
}
.title {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  line-height: 4;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 6px;
}
.avatar {
  position: absolute;
  right: 10px;
  top: 20px;
  display: inline-block;
}
.userMenu {
  display: inline-block;
}
.userMenu:hover {
  cursor: pointer;
}
</style>
